<template>
  <div>
    <div :id="id" :class="className" :style="{height:height+'px',width:width}" />
    <div :id="`${id}1`" :class="className" :style="{height:(height*0.66)+'px',width:width}" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '../mixins/resize'
import { throttle, parseTime } from '@/utils'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200'
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chart: null,
      chart1: null
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    this.chart1.dispose()
    this.chart1 = null
  },
  methods: {
    updateView() {
      this.chart && this.chart.dispose()
      this.chart1 && this.chart1.dispose()
      this.initChart()
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart1 = echarts.init(document.getElementById(this.id+'1'))

      const color_list = ['rgba(225,103,86,1)', 'rgba(129,183,236,1)', 'rgba(238,203,87,1)', 'rgba(173,224,255,1)', 'rgba(255,155,203,1)'] //todo 颜色 
      const color_list_a = ['rgba(225,103,86,0.2)', 'rgba(129,183,236,0.2)', 'rgba(238,203,87,0.2)', 'rgba(173,224,255,0.2)', 'rgba(255,155,203,0.2)'] //todo 颜色
      
      const series1 = []
      const series2 = []
      const data = this.data
      if(Object.keys(data[0].data).length) {
        Object.keys(data[0].data).forEach((key, i) => {
          const item = data[0].data[key]
          series1.push({
            name: key,
            type: 'line',
            symbolSize: 2,
            symbol: 'emptyCircle',
            showSymbol: false,
            lineStyle: {
              width: 1.6
            },
            itemStyle: {
              color: color_list[i]
            },
            data: item
          })
        })
      }

      if(Object.keys(data[1]).length) {
        Object.keys(data[1]).forEach((key, i) => {
          const item = data[1][key]
          series2.push({
            name: key,
            type: 'line',
            symbolSize: 2,
            symbol: 'emptyCircle',
            showSymbol: false,
            itemStyle: {
              color: color_list[i]
            },
            lineStyle: {
              width: 1.6
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: i ? 'rgba(0,0,0,0)' : color_list_a[i]
              }, {
                offset: 1,
                color: i ? 'rgba(0,0,0,0)' : color_list[i]
              }])
            },
            data: item
          })
        })
      }

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            textStyle: {
              color: '#fff'
            }
          },
          formatter: (params) => {
            let str = ''
            str += `<div style="padding-bottom: 2px;">${parseTime(params[0].name)}</div>`
            for (let i = 0; i < params.length; i += 1) {
              if(params[i].data!=null) {
                str += `<div style="display: flex;align-items: center;">
                      ${params[i].marker} 
                      <span style="flex:1;">${params[i].seriesName}</span>
                      <span style="margin-left: 10px;font-weight: bold;"> ${params[i].data}${(typeof params[i].data)=='number' ? '%' : ''}</span>
                      </div>`
              }
            }
            return str
          }
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '20%',
          bottom: '15%',
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          left: '82%',
          top: '10%',
          textStyle: {
            color: '#90979c',
            fontSize: 11,
          }
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          boundaryGap: false, // 折线从x轴起始开始走
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 'auto'
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 'auto',
            margin: 20,
          },
          data: data[0].x_date,
        }],
        yAxis: [
          {
            type: 'value',
            // min: function(value) {
            //   const num = value.min - (value.max - value.min)/5
            //   return downFixed(num, 1)
            // },
            // max: function(value) {
            //   const num = value.max + (value.max - value.min)/5
            //   return upFixed(num, 1)
            // },
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#90979c'
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                // return value.toFixed(4)
                return value + '%'
              }
            },
            splitArea: {
              show: false
            }
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: false,
          start: 0,
          end: 100
        }, {
          show: false,
          start: 0,
          end: 100,
          realtime: true,
          height: '6%',
          bottom: '8%',
        }],
        series: series1
      })

      this.chart1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            textStyle: {
              color: '#fff'
            }
          },
          formatter(params) {
            let str = ''
            str += `<div style="padding-bottom: 2px;">${parseTime(params[0].name)}</div>`
            for (let i = 0; i < params.length; i += 1) {
              if(params[i].data!=null) {
                str += `<div style="display: flex;align-items: center;">
                      ${params[i].marker} 
                      <span style="flex:1;">${params[i].seriesName}</span> 
                      <span style="margin-left: 10px;font-weight: bold;"> ${params[i].data}${(typeof params[i].data)=='number' ? '%' : ''}</span>
                      </div>`
              }
            }
            return str
          }
        },
        grid: {
          top: '4%',
          left: '5%',
          right: '20%',
          bottom: '35%',
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          left: '82%',
          top: '2%',
          textStyle: {
            color: '#90979c',
            fontSize: 11,
          }
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          boundaryGap: false, // 折线从x轴起始开始走
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            show: false,
            interval: 'auto'
          },
          data: data[0].x_date
        }],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#90979c'
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                return value + '%'
              }
            }
          }
        ],
        dataZoom: [{
          show: false,
          type: 'slider',
          start: 0,
          end: 100,
          realtime: true,
          height: '0%',
          bottom: '18%',
        }, {
          realtime: true, // 实时更新系列的视图
          height: '10%',
          bottom: '15%',
        }],
        series: series2
      })

      // this.chart1.on('datazoom', throttle((params) => {
      //   const op = this.chart.getOption()
      //   const op1 = this.chart1.getOption()
      //   op.dataZoom[0].start = op1.dataZoom[0].start
      //   op.dataZoom[0].end = op1.dataZoom[0].end
      //   op.dataZoom[1].start = op1.dataZoom[1].start
      //   op.dataZoom[1].end = op1.dataZoom[1].end
      //   this.chart.setOption(op)
      //   this.chart1.setOption(op1)
      // }, 500))
    },
  }
}
</script>
